<template>
	<view class="message">
		<uv-tabs :list="tablist" :current="tabindex" @change="tabsChange" :scrollable="false"></uv-tabs>
		<view v-if="tabindex==0" class="th-lists">

			<view v-for="item in thlist" :key="item.id">
				<fy-user-desc :userInfo="item"></fy-user-desc>

			</view>
			<view v-for="item in arealist" :key="item.id">
				<fy-user-desc :userInfo="item"></fy-user-desc>
			
			</view>
			<view>
				 

			<uv-load-more :status="status" @loadmore="loadMore" :height="40" :marginTop='10' ::marginBottom='10' />
			<view v-if="!userInfo.vipnames">
				<uv-button type="warning" :round="25">开通会员,查看全部</uv-button>
			</view>
		</view>
		</view>
		<block v-else>
			<view class="chatList">
				<uv-list>
					<uv-list-item v-for="item in chatList" :key="item.user_id" :thumb="item.avatar?imghost+item.avatar:''"
						thumb-size="lg" :title="item.username" :note="item.data" :show-badge="true"
						:badge="{value: item.noread}" link :border="true" @click="tochat(item)">
					</uv-list-item>
				
				</uv-list>
			</view>
			
		</block>
	</view>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'
	import baseconfig from '@/config.js'
	import { getAllSames,getSamePlaceUsers } from '@/utils/http.js'
	export default {
		data() {
			return {
				tablist: [{ name: '推荐同行' }, { name: '沟通消息', badge: { value: 0 } }], 
				thlist: [],
				arealist:[],
				tabindex: 0,
				imghost: baseconfig.api_url,
				total: 0,
				status: 'loadmore',
				queryForm: {
					start: 0,
					length: 5,
				}
			}
		},
		onReachBottom() {
			if (this.userInfo.userInfo && this.status == 'loadmore') {
				this.queryForm.start += this.queryForm.length
				this.queryAreas()
			}
		},
		computed: {
			...mapGetters({
				allNotRead: 'socket/allNotRead'
			}),
			...mapState({
				chatList: state => state.socket.chatList,
				token: state => state.user.token,
				userInfo: state => state.user.userInfo,
				custm:state=>state.setting.custm
			})
		},
		onShow() {
			this.$store.dispatch('socket/updateTabbarBadge')
			this.tablist[1].badge.value = this.allNotRead
			if (this.token) {
				this.queryForm.length=10
				this.querysames()
				if(this.userInfo.vipnames){
					this.queryAreas()
				}
			} else {
				uni.showModal({
					title: "温馨提醒",
					content: '马上登录',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({ url: '/pages/auth/login' })
						}
					}
				})
			}
		},
		methods: {
			toshop(item) {
				var url_parm = `?userid=${item.id}`
				uni.navigateTo({
					url: '/pages/shop/shop' + url_parm,
					success: () => {

					}
				})
			},
			tabsChange(e) {
				this.tabindex = e.index
			},
			queryAreas(){
				getSamePlaceUsers(this.queryForm).then(res => {
					const { total, rows, count } = res.data
					rows.map(arr => {
						arr.userimgsrc = baseconfig.api_url + arr.imgsrc
						arr.area = ""
						if (arr.ipplace) {
							var d = arr.ipplace.split(" ")
							
							arr.area =this.custm.sameplaceisshi=="0"? d[1]:d[2]
						}
						arr.cars = arr.upload + arr.pyq
					})
					this.total = total
					Object.assign(this.thlist, rows)
					if ((this.queryForm.start + this.queryForm.length) >= total) {
						this.status = 'nomore'
					}
				})
			},
			querysames() {
				getAllSames(this.queryForm).then(res => {
					const { total, rows, count } = res.data
					rows.map(arr => {
						arr.userimgsrc = baseconfig.api_url + arr.imgsrc
						arr.area =this.custm.sameplaceisshi=="0"?this.userInfo.province:this.userInfo.city
						 
						arr.cars = arr.upload + arr.pyq
					}) 
					 this.thlist= rows 
				})
			},
			tochat(e) {
				var url_parm =
					`?userid=${e.user_id}&imgsrc=${e.avatar}&username=${e.username}`
				uni.navigateTo({ url: '/pages/message/signTalk' + url_parm })
			}
		}
	}
</script>

<style lang="scss">
	.message .uv-list-item__icon {
		border-radius: 80upx;
		overflow: hidden;
	}

	.message .uv-list-item__icon-img {
		margin: 0 !important;
	}
	.th-lists{
		padding: 0 20upx 20upx 20upx;
		.th-item{
			display: flex;
			background-color: #fff;
			margin-top: 1px;

			&_header {
				width: 100rpx;
			}

			&_content {
				flex: 1;
			}

			&_footer {
				width: 100rpx;
			}
		}
	}
	.message .busi-info{
		padding:0
	}
	.chatList{
		margin:20upx 0 0 0;
	}
	.chatList .uv-icon{
		padding:0 20upx;
	}
</style>